<template>
  <div class="container">
    <el-row :gutter="20">
      <!-- 左占位 -->
      <el-col :span="6"></el-col>
      <!-- 内容区 -->
      <el-col :span="12">
        <el-popover
          popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
        >
          <template
            #reference
            v-for="size in sizeList"
            :key="size"
            class="block"
          >
            <el-avatar :size="size" :src="circleUrl" />
          </template>
          <template #default>
            <div
              class="demo-rich-conent"
              style="display: flex; gap: 16px; flex-direction: column"
            >
              <el-avatar
                :size="60"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                style="margin-bottom: 8px"
              />

              <!-- 个性签名 -->
              <p class="demo-rich-content__desc" style="margin: 0">
                开始的开始，我们还是孩子 最后的最后，我们变成天使。
                表示从1楼到四楼的距离原来只有三年 毕业和成年的字眼格外扣人心弦。
              </p>
            </div>
          </template>
        </el-popover>
        <!-- ------------- 头像       结束 ---------- -----------       -->

        <p>给今天心情打个分吧</p>
        <el-rate
          v-model="value"
          :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
          show-text
        />

        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="TA说" name="fourth">
            <!-- 留言板 -->
            <div class="message-edit">
                <el-input v-model="messageContent"  placeholder="我也说两句..." type="textarea" />
              <el-row>
                <el-col :span="20"></el-col>
                <el-col :span="4">
                  <el-button v-show="isEmpty" style="margin-top:10px;" @click="postMessage" type="primary">提交</el-button>
                </el-col>
              </el-row>
            </div>
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :timestamp="activity.created"
              >
                <!-- 用户 -->
                <el-button type="info" size="small" round>{{
                  activity.username
                }}</el-button>

                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
          <!-- 相册集 -->
          <el-tab-pane label="时光机" name="first">
            <div class="main-eyes">
              <!--         ----------------           初中高中大学图片合集开始  ----------- -------->
              <el-upload
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                :http-request="uploadImage"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>

              <el-dialog v-model="dialogVisible">
                <el-image :src="dialogImageUrl" :fit="fit" />
              </el-dialog>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <!-- 右占位 -->
      <el-col :span="6"></el-col>
    </el-row>
  </div>
</template>




<script lang="ts" setup>
import api from "../helper/api";
import { useUserStore } from "../store/user";
import { useTokenStore } from "../store/token";

import { reactive, toRefs, ref, onMounted, computed, watch } from "vue";
import type { TabsPaneContext } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

import type { UploadProps, UploadUserFile } from "element-plus";

const userStore = useUserStore();

// 留言信息
const messageContent = ref("");

// 添加留言
const postMessage = ()=>{
  let uid:string = userStore.id;
  let content:string = messageContent.value as string;
  // 无效提交直接屏蔽
  if(content.length==0) return;
  api.postMessage(uid,messageContent.value)
  .then((res)=>{
    console.log(res)
    refreshMessageList();
    messageContent.value=""
  }).catch(res=>{
    messageContent.value=""
  })
}

// 刷新照片列表
const refreshImageList = () => {
  api.getImageList(userStore.id).then((res) => {
    fileList.value = res.data["data"];
  });
};

// 刷新留言列表
const refreshMessageList = () => {
  api.getMessageList().then((res) => {
    activities.value = res.data["data"];
  });
};

// 文件上传
let uploadImage = (options) => {
  console.log("开始上传了...");
  console.log(options);
  let payload: FormData = new FormData();
  payload.set("file", options.file);
  payload.append("id", userStore.id);
  api
    .uploadImage(payload)
    .then((res) => {
      refreshImageList();
    })
    .catch((err) => {
      console.log(err);
      refreshImageList();
    });
};

//             <!--  ------------头像      开始----------------------------->
const state = reactive({
  circleUrl:
    "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
  squareUrl:
    "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
  sizeList: ["large"] as const,
});

const { circleUrl, sizeList } = toRefs(state);
const value = ref();

const fileList = ref<UploadUserFile[]>([]);

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  let fileName: string = uploadFile.name;
  //  let fileName:string = url.substring(url.lastIndexOf("/")+1,)
  api.deleteImage(fileName).then((res) => {
    refreshImageList();
  });
};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};

const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const activities = ref([]);
onMounted(() => {
  refreshImageList();
  refreshMessageList();
});


// 空标识
let isEmpty = computed(() => {
  return messageContent.value.length != 0;
});


</script>

<!-- 样式穿透 -->
<style>
.el-timeline-item__wrapper {
  margin-top: 8px;
}
.el-dialog__body img {
  /* max-width: 500px; */
}
</style>
